<template>
  <div class="addressManagement">
            <div class="section1">
                    <input type="text" class="name" placeholder="请输入收件人姓名">
                <span class="iconfont icon-morentouxiang icon"></span>
            </div>
            <div class="section2">
                    <input type="text" class="phone" placeholder="请输入收件人电话">
                <span class="iconfont icon-icon-test9 icon"></span>
            </div>
            <div class="Area">
                <div class="control">
                    <p>收货地址</p>
                    <input type="text" placeholder="省/市/区" v-model="region" maxlength="80" readonly="readonly" @click="showAddressPicker" />
                </div>
                <!-- 省市区地址选择 -->
                <mt-popup v-model="regionVisible" position="top">
                    <mt-picker :slots="myAddressSlots" valueKey="name" :visibleItemCount="5" @change="addressChange" :itemHeight="40"></mt-picker>
                </mt-popup>
                <p>详细地址</p>
                <input type="text" placeholder="（如门牌号等）" v-model="msg">
            </div>
            <div class="defaultAddress">
                <div>
                    <span class="span1">设为默认地址</span>
                    <span class="span2"><input type="checkbox"></span>
                </div>
            </div>
            <div class="preserve">
                <div>保存</div>
            </div>
       </div>
</template>

<style scoped lang="less">
.addressManagement{
  
    // background: #fff;
    color: rgb(103,103,103);
    .section1,.section2{
      width: 96vw;
      margin: .5rem auto;
      position: relative;
      font-size: .426667rem;  
     input{
         outline: none;
         border: none;
     }
      .name{
        display: block;
        height: .8rem;
       line-height: .8rem;
      }
      .phone{
        display: block;
        height: .8rem;
       line-height: .8rem;
      }
        .icon{
          position: absolute;
          right: .533333rem;
          top: 0;
         font-size: .8rem;
        }
    }
    .Area{
        .control{
          
            input{
            width: 92vw;
            margin: 0 auto;
            display: block;
            height: 1rem;
            border: none;
            outline: none;
            border-bottom: 1px solid gray; 
            }
            }
        input{
            width: 92vw;
            margin: 0 auto;
            display: block;
            height: 1rem;
            border: none;
            outline: none;
            border-bottom: 1px solid gray; 
            }
           p{
            margin-top: .533333rem;
            font-size: .533333rem;
            margin-left: 2%;
            }
           .picker{
            width: 100vw;
        }
       
    }
   .defaultAddress >div{
      
       font-size: .426667rem;
        position: relative;
        width: 9.6rem;
        margin: .5rem .2rem;
        height: .8rem;
        line-height: .8rem;
       .span1{
           margin-left: 2%;
           
          
       }
       .span2{
             input{
               
                 position: absolute;
                 right:5%;
                top: 0;
                width: .533333rem;
                height: .8rem;
                line-height: .8rem;
            }
       }
   }
   .preserve{
       background: #F7F7F7;
       display: flex;
       align-items: center;
       justify-content: center;
     
       height: 7.546667rem;
       div{
           color: #fff;
           background: #FFCC00;
           width: 3.333333rem;
           height: 1rem;
           line-height: 1rem;
           text-align: center;
           border: 1px solid #FFCC00;
           border-radius: .166667rem;
       }
   }
}
</style>
<script>
    import addrlist from '../assets/data.json';
    import '../../public/lib-flexible';
    export default {
        name: "Area",
        data () {
            return {
                fullHeight: document.documentElement.clientHeight,



                regionVisible: false, // 弹出框默认是否可见
                msg:'',
                region: '',
                // picker组件插槽
                myAddressSlots: [
                    // 省
                    {
                        flex: 1,
                        values: this.getProvinceArr(), // ['广东'], // 省份数组
                        className: 'slot1',
                        textAlign: 'left',
                       
                    },
                    // 分隔符
                    {
                        divider: true,
                        content: '-',
                        className: 'slot2'
                    },
                    // 市
                    {
                        flex: 1,
                        values: this.getCityArr("440000"), // []
                        className: 'slot3',
                        textAlign: 'left',
                         
                    },
                    {
                        divider: true,
                        content: '-',
                        className: 'slot4'
                    },
                    // 县
                    {
                        flex: 1,
                        values: this.getCountyArr("440500"), // []
                        className: 'slot5',
                        textAlign: 'left',
                        
                    }
                ]
            }
        },
        methods: {
            showAddressPicker () {
                this.regionVisible = true;
            },
            addressChange (picker, values) {
                let provicename = values[0]['name'] ? values[0]['name'] : '';
                let cityname = values[1]['name'] ? values[1]['name'] : '';
                let areaname = values[2]['name'] ? values[2]['name'] : '';
                this.region = provicename + '-' + cityname + '-' + areaname;

                // 给市、县赋值
                picker.setSlotValues(1, this.getCityArr(values[0]["code"]));
                picker.setSlotValues(2, this.getCountyArr(values[1]["code"]));
            },
            getProvinceArr () {
                let gp = addrlist.province;
                return gp;
            },
            getCityArr (code) {
                let p = addrlist.city[code];
                let cityname = p.map(item => item.name);
                // console.log(p);
                return p;
            },
            getCountyArr (code) {
                let s = addrlist.area[code];
                if (s) {
                    let countyname = s.map(item => item.name);
                }
                // console.table(code, s);
                return s;
            },

            getHeight(){
                window.onresize= ()=>{
                    return (
                        ()=>{
                              window.fullHeight = document.documentElement.clientHeight;
          this.fullHeight = window.fullHeight;
                        })()
                }
            }
        },
        
        watch: {
            fullHeight(val) {
                if (this.timer) {
                    this.fullHeight = val;
                    this.timer = true;
                    setTimeout(() => {
                    this.timer = false;
                    }, 400);
                }
            }
        },
        mounted: function() {
            this.getHeight();
          
        },
        // beforeCreate () {
        //     document.querySelector('body').setAttribute('style','background:red;width:100%;height:100%;margin:0 auto;overflow: hidden');
        // },
        created(){
            this.axios.get('api/getAddress?id=111')
            .then((res)=>{
                console.log(res)
            })
            .catch((err)=>{
                console.log(err)
            })
        },

    }
</script>



